<!DOCTYPE html>
<html lang="en" xmlns:zxw="http://www.w3school.com.cn" xmlns:njzxw="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="../../../js/common/layui/css/layui.css">
    <link rel="stylesheet" href="../../../css/common/animate.css" />
    <link rel="stylesheet" href="../../../css/common/common.css" />
    <style type="text/css" >
        .layui-icon-add-circle-fine{
            cursor: pointer;
        }
        .layui-elem-field{
            position: relative;
        }
        .layui-icon-close-fill{
            position: absolute;
            right: 0px;
            top: 16px;
            color: red !important;
            cursor: pointer;
        }
        .layui-this{
            margin-top: 1px;
        }
        .layui-btn-group1{
            padding: 10px 10px;
            position: fixed;
            width: 100%;
            background-color: white;
            z-index: 1;
            height: 38px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
        }
        .body1{
            padding-top: 58px;
        }
        .layui-icon-edit{
            cursor: pointer;
        }

        .index0  .layui-collapse{
            border-width:0px;
        }
        legend{
            font-weight: bold !important;
        }
    </style>
</head>
<body class="layout-zxw" >
    <div class="layui-btn-group1" >
        <zxw:bnt type="add" control="user/save|user/saveUser" url="../html/sys/itemCfg_new/add.html" title="新增参数类型" ></zxw:bnt>
    </div>
    <div class="body1" >

        <blockquote style="color: red" class="layui-elem-quote layui-quote-red">
            <p>1、以下信息不理解情况下不建议直接修改，否则将影响系统运行</p>
            <p>2、每次修改成功系统会自动进行一次备份操作</p>
            <p>3、以下系统运行参数修改成功后默认5分钟内生效</p>
        </blockquote>
        <div class="layui-tab" lay-filter="tab_cfg" >
            <ul class="layui-tab-title"  >
                <li class="layui-this">单项设置</li>
                <li>多项设置</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form action="" id="videoInfoform" class="layui-form layui-fluid" lay-filter="videoInfofilter" >
                        <div class="body index0" ></div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 此中按钮会自动加入到按钮组中 -->
        <div class="btn_" >
            <a id='back' onclick="beifen();" class="layui-layer-btn0"><i></i>备份</a>
            <!--<a id='reback' onclick="rebeifen();" class="layui-layer-btn0"><i></i>还原备份</a>-->
            <a id='getreback' onclick="getreback();" class="layui-layer-btn0"><i></i>查看备份</a>
        </div>
    </div>
    <script type="application/javascript" src="../../../js/common/own/own.js?layui,jquery,njzxw,URL,webUpload" >
        njzxw.layui.val({
            url:URL.ITEM.GETITEMLIST_NEW,
            data:{
                id:'1',
                type:0
            },
            fun:function(data){
                loadSign(data,0);
            }
        });

        njzxw.layui.submit({
            url:URL.ITEM.SAVENEW,
            againparams:true,
            prepFun:function(data){
                console.log(data);
                if(index == 1){//多项
                    if(typeof(data.idss) == 'string'){
                        data.idss = [data.idss];
                        data.names = [data.names];
                        data.group_ids = [data.group_ids];
                        data.remarks = [data.remarks];
                        data.orderbys = [data.orderbys];
                        data.valuess = [data.valuess];
                    }
                }else{

                }
                return data;
            }
        });

        var index = 0;
        layui.element.on('tab(tab_cfg)',function(o){
            index = o.index;
            $('.body').removeClass('index0');
            $('.body').removeClass('index1');
            $('.body').addClass('index'+index);
            njzxw.ajax({
                url:URL.ITEM.GETITEMLIST_NEW,
                data:{
                    type:index
                },
                fun:function(a,b){
                    if(a){
                        loadSign(b.data,index);
                    }
                }
            });

        });

        function loadSign(json,type){

            if(json.length != 0){
                var html = '<input type="hidden" value="'+type+'" name="type" >';
                if(i != 0){
                    // html += '<div class="layui-collapse" lay-filter="test">';
                    html += '<div class="layui-collapse" lay-filter="test">';
                }
                var group_name = "";
                var inde = 0;
                for(var i=0;i<json.length;i++){
                    if(type == 0){//单项
                        html += '<div class="" ><fieldset class="layui-elem-field" >\n' +
                            '                            <legend><i data-id="'+$.trim(json[i].groupcode)+'" data-name="'+$.trim(json[i].groupname)+'" class="layui-icon layui-icon-edit layui-bg-red"></i> '+$.trim(json[i].groupname)+'【'+$.trim(json[i].groupcode)+'】'+'</legend>\n' +
                            '                            <div class="layui-field-box">\n' +
                            '                               <blockquote class="layui-elem-quote layui-quote-nm">备注：阿里云oss bucketname 临时存储</blockquote>\n' +
                            '                               <input type="hidden" name="idss" value="'+$.trim(json[i].id)+'" class="layui-input">\n' +
                            '                               <input type="hidden" name="group_ids" value="'+$.trim(json[i].groupcode)+'" class="layui-input">\n' +
                            '                               <input type="text" name="valuess" value="'+$.trim(json[i].values)+'" lay-verify="required" placeholder="请输入'+$.trim(json[i].groupname)+'" autocomplete="off" class="layui-input">\n' +
                            '                            </div>\n' +
                            '                        </fieldset></div>';
                        // html += '<div class="layui-form-item">\n' +
                        //     '                        <label style="width: 200px" class="layui-form-label"><i data-id="'+$.trim(json[i].id)+'" class="layui-icon layui-icon-edit layui-bg-red"></i>'+$.trim(json[i].groupname)+'\n('+$.trim(json[i].groupcode)+')'+'</label>\n' +
                        //     '                        <div class="layui-input-inline">\n' +
                        //     '                            <input type="hidden" name="idss" value="'+$.trim(json[i].id)+'" class="layui-input">\n' +
                        //     '                            <input type="hidden" name="group_ids" value="'+$.trim(json[i].groupcode)+'" class="layui-input">\n' +
                        //     '                            <input type="text" name="valuess" value="'+$.trim(json[i].values)+'" lay-verify="required" placeholder="请输入'+$.trim(json[i].groupname)+'" autocomplete="off" class="layui-input">\n' +
                        //     '                        </div>\n' +
                        //     '                        <div class="layui-form-mid layui-word-aux">'+$.trim(json[i].explain)+'</div>\n' +
                        //     '                    </div>';
                    }else{
                        var groupName = json[i].groupname;
                        if(group_name == ""||groupName!=group_name){

                            group_name = groupName;

                            if(i != 0){
                                inde = 0;
                                html += '</div>\n' +
                                    '                    </div>';
                            }

                            html += '<div class="layui-colla-item">\n' +
                                '                            <h2 class="layui-colla-title"><i data-id="'+$.trim(json[i].groupcode)+'" data-name="'+$.trim(json[i].groupname)+'" class="layui-icon layui-icon-edit layui-bg-red"></i> '+json[i].groupname+'\n('+$.trim(json[i].groupcode)+')'+'</h2>\n' +
                                '                            <div class="layui-colla-content " >\n';
                            if($.trim(json[i].group_remark) != ''){
                                html += '                                <blockquote class="layui-elem-quote layui-quote-nm">'+$.trim(json[i].group_remark)+'</blockquote>\n' ;
                            }
                            if(json[i].is_add_item == 1) {
                                html += '                                <i onclick="addItem(this,\''+$.trim(json[i].groupcode)+'\');" class="layui-icon layui-icon-add-circle-fine" style="font-size: 30px; color: #1E9FFF;"></i>';
                            }
                        }
                        inde ++;

                        html += '<fieldset class="layui-elem-field" >\n';
                        if(json[i].is_add_item == 1){
                            html +='                                <i onclick="deleteItem(this);" class="layui-icon layui-icon-close-fill" style="font-size: 30px; "></i>';
                        }
                        html += '                                    <legend>'+inde+'</legend>\n' +
                            '                                    <div class="layui-form-item">\n' +
                            '                                        <div class="layui-inline">\n' +
                            '                                            <label class="layui-form-label">参数名称</label>\n' +
                            '                                            <div class="layui-input-inline">\n' +
                            '                            <input type="hidden" name="idss" value="'+$.trim(json[i].id)+'" class="layui-input">\n' +
                            '                            <input type="hidden" name="group_ids" value="'+$.trim(json[i].groupcode)+'" class="layui-input">\n' +
                            '                                                <input type="text" value="'+$.trim(json[i].name)+'" name="names" lay-verify="required" placeholder="请输入参数名称" autocomplete="off" class="layui-input">\n' +
                            '                                            </div>\n' +
                            // '                                            <div class="layui-form-mid layui-word-aux">请填写参数名称参数名称参数名称参数名称参数名称</div>\n' +
                            '                                        </div>\n' +
                            '                                        <div class="layui-inline">\n' +
                            '                                            <label class="layui-form-label">参数顺序</label>\n' +
                            '                                            <div class="layui-input-inline">\n' +
                            '                                                <input type="text" name="orderbys" value="'+$.trim(json[i].orderby)+'" lay-verify="number" placeholder="请输入参数顺序" autocomplete="off" class="layui-input">\n' +
                            '                                            </div>\n' +
                            // '                                            <div class="layui-form-mid layui-word-aux">''</div>\n' +
                            '                                        </div>\n' +
                            '                                    </div>\n' +
                            '                                    <div class="layui-form-item">\n' +
                            '                                        <label class="layui-form-label">参数值</label>\n' +
                            '                                        <div class="layui-input-block">\n' +
                            '                                            <input type="text" name="valuess" value="'+$.trim(json[i].values)+'" lay-verify="required" placeholder="请输入参数值" autocomplete="off" class="layui-input">\n';
                        if($.trim(json[i].explain) != ''){
                            html += '                                            <div class="layui-form-mid layui-word-aux">'+$.trim(json[i].explain)+'</div>\n' ;
                        }

                        html += '                                        </div>\n' +
                            '                                    </div>\n' +
                            '                                    <div class="layui-form-item">\n' +
                            '                                        <label class="layui-form-label">参数备注</label>\n' +
                            '                                        <div class="layui-input-block">\n' +
                            '                                            <input type="text" name="remarks" value="'+$.trim(json[i].remark)+'" placeholder="请输入参数备注" autocomplete="off" class="layui-input">\n' +
                            '                                        </div>\n' +
                            '                                    </div>\n' +
                            '                                </fieldset>';
                    }
                }
                if(i != 0){
                    html += '</div>';
                }
                $('.body').html(html);
                layui.element.render('collapse');

            }

            $('.layui-icon-edit').on('click',function(){
                var name = $(this).attr('data-name');
                var id = $(this).attr('data-id');
                njzxw.openWindow({
                    id:'itemEdit',
                    title:'编辑'+($.trim(name) != ''?'【'+name+'】':''),
                    content:'../html/sys/itemCfg_new/add.html?id='+id+'&groupcode='+id
                })
            });

        }

        function addItem(obj,group_id){
            var html = $(obj).parent().find('fieldset:eq(0)').clone();
            $('legend',html).html($(obj).parent().find('fieldset').size()+1);
            $(html).find('input').val('');
            $(html).find("input[name='group_ids']").val(group_id);
            $(obj).parent().append(html);
        }

        function deleteItem(obj){
            if($(obj).parent().parent().find('fieldset').size() == 1){
                $(obj).parent().find("input").val('');
            }else{
                $(obj).parent().remove();
            }
        }

        //备份操作
        function beifen(){
            njzxw.load.show();
            njzxw.ajax({
                url:URL.ITEM.BACK,

                fun:function(a,b){
                    njzxw.load.hide();
                    if(a){
                        njzxw.alert({
                            msg:b.msg
                        });
                    }
                }
            });
        }

        /**
         * 还原备份
         */
        function rebeifen(){

        }

        /**
         * 查看备份信息
         */
        function getreback(){
            njzxw.load.show();
            njzxw.ajax({
                url:URL.ITEM.GETBACKLIST,
                fun:function(a,b){
                    njzxw.load.hide();
                    if(a){
                        if($.trim(b.data) == ''){
                            njzxw.alert({
                                msg:'未查询到任何备份信息'
                            });
                        }else{
                            var html = '<table lay-filter="backtable" >\n' +
                                '        <thead>\n' +
                                '            <tr>\n' +
                                '                <th lay-data="{type:\'numbers\'}" >序号</th>\n' +
                                '                <th lay-data="{field:\'time\'}" >备份时间</th>\n' +
                                '                <th lay-data="{field:\'oper\'}" >备份人</th>\n' +
                                '                <th lay-data="{field:\'cz\'}" >操作</th>\n' +
                                '            </tr>\n' +
                                '        </thead>\n' +
                                '        <tbody>\n' ;

                            for(var i=0;i<b.data.length;i++){
                                html += '            <tr>\n' +
                                    '                <td></td>\n' +
                                    '                <td>'+b.data[i].oper_date+'</td>\n' +
                                    '                <td>'+b.data[i].name+'</td>\n' +
                                    '                <td><a onclick="getData('+b.data[i].id+')" class="layui-btn layui-btn-danger layui-btn-xs" >还原到页面</a></td>\n' +
                                    '            </tr>\n';
                            }

                            html += '        </tbody>\n' +
                                '    </table>';
                            layer.open({
                                title: '备份信息',
                                content: html,
                                area:['100%','100%'],
                                btn:[],
                                shade:true,
                                success:function(){
                                    layui.table.init('backtable', {
                                        height: 315,
                                        limit: 10,
                                        page:true
                                    });
                                }
                            });
                        }
                    }
                }
            });
        }

        function getData(id){
            njzxw.ajax({
                url:URL.ITEM.GETITEMLIST_NEW,
                data:{
                    type:index,
                    back_id:id
                },
                fun:function(a,b){
                    if(a){
                        layer.closeAll();
                        loadSign(b.data,index);
                    }
                }
            });
        }

    </script>
</body>
</html>